
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../poem/leancloud.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage/dist/av-min.js"></script>
    <link rel="stylesheet" href="../poem/loading.css">
    <link rel="stylesheet" href="../poem/leancloud.css">

</head>
<style>
    .social-media-post {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .profile {
      display: flex;
      align-items: center;
    }
  
    .avatar {
      width: 50px; /* Adjust size as needed */
      height: 50px; /* Adjust size as needed */
      border-radius: 50%;
      /* margin-right: 10px; */
      object-fit: cover; 
    }
  
    .user-info {
      display: flex;
      flex-direction: column;
      padding: 10px;
    }
  
    .username {
      font-weight: bold;
    }
  
    .timestamp {
      font-size: 0.8em;
      color: #777;
    }
  
    .post-text {
      margin-top: 10px;
    }
    .imgContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .imgContainer img {
        width: 100px; 
        height: 100px;
        padding: 5px;
        object-fit: cover; 
        border-radius: 10px;
        transition: transform 0.5s;
    }
    img:hover {
        transform: scale(1.05);
        cursor: pointer;
    }
  </style>
<body>

    <div id="container">
    </div>

  <script>
            var elements = document.querySelector('.post-title__text');
            elements.textContent = '发现详情'

            var container = document.getElementById("container");
            var post_imgArr = localStorage.getItem('post_imgArr');
            var objectId = localStorage.getItem('objectId');
            var post_avatar = localStorage.getItem('post_avatar');
            var post_username = localStorage.getItem('post_username');
            var post_content = localStorage.getItem('post_content');
            var post_date = localStorage.getItem('post_date');

            var newDiv = document.createElement("div");
            newDiv.classList.add("social-media-post");
            container.appendChild(newDiv);

            var profile = document.createElement("div");
            profile.classList.add("profile");
            newDiv.appendChild(profile);

            var avatar = document.createElement("img");
            avatar.classList.add("avatar");
            avatar.src = post_avatar;
            profile.appendChild(avatar);

            var userInfo = document.createElement('div')
            userInfo.classList.add("user-info");
            profile.appendChild(userInfo);

            var nameDiv = document.createElement("span");
            nameDiv.classList.add("username");
            nameDiv.innerHTML = post_username;
            userInfo.appendChild(nameDiv);

            var date = document.createElement("span");
            date.classList.add("timestamp");
            date.innerHTML = post_date;
            userInfo.appendChild(date);

            var content = document.createElement("p");
            content.classList.add("post-text");
            content.innerHTML = post_content;
            newDiv.appendChild(content);

            var imgContainer = document.createElement("div");
            imgContainer.classList.add("imgContainer");
            newDiv.appendChild(imgContainer);

            var imgArr = post_imgArr.split('、');
            imgArr.forEach(function(img) {
                var newImg = document.createElement("img");
                var decodedUrl = decodeURIComponent(img);
                newImg.src = decodedUrl;
                newImg.classList.add("post-image");
                newImg.style.borderRadius = "10px";
                imgContainer.appendChild(newImg);
            })
  </script>

</body>
</html>
